<template>
  <div class="Echarts">
    <div id="main" style="width: 100%;height:250px;margin-bottom: 150px; margin-top: 50px"></div>
    <div id="foot" style="width: 100%;height: 250px"></div>
  </div>
</template>

<script>
import echarts from 'echarts'
export default {
  name: "index",
  data() {
    return {
      msg: 'Welcome use Echarts',
    };
  },
  methods:{
    myEcharts(){
      var chartDom = document.getElementById('main');
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        title: {
          text: '乡镇收入支出统计'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['上半年度收入', '上半年度人均可支配收入', '上半年度总支出', '上半年度医疗支出', '上半年度教育支出']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '上年度收入',
            type: 'line',
            stack: '总量',
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: '上年度人均可支配收入',
            type: 'line',
            stack: '总量',
            data: [220, 182, 191, 234, 290, 330, 310]
          },
          {
            name: '上年度总支出',
            type: 'line',
            stack: '总量',
            data: [150, 232, 201, 154, 190, 330, 410]
          },
          {
            name: '上年度医疗支出',
            type: 'line',
            stack: '总量',
            data: [320, 332, 301, 334, 390, 330, 320]
          },
          {
            name: '上年度教育支出',
            type: 'line',
            stack: '总量',
            data: [820, 932, 901, 934, 1290, 1330, 1320]
          }
        ]
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
    footEcharts(){
      var app = {};

      var chartDom = document.getElementById('foot');
      var myChart = echarts.init(chartDom);
      var option;

      var data = [{
        name: '上年度工资性收入（元',
        value: 70
      }, {
        name: '上年度经营性收入（元）',
        value: 68
      }, {
        name: '上年度除低保金外的其他转移性收入（元）',
        value: 48
      }, {
        name: '上年度财产净收入（元）',
        value: 40
      }, {
        name: '上年度总收入（元）',
        value: 32
      }, {
        name: '上年度人均可支配收入（元）',
        value: 27
      }, {
        name: '上年度低保金（元）',
        value: 18
      }];

      var data2 = [{
        name: '上年度生产性支出（元）',
        value: 70
      }, {
        name: '上年度转移性支出（元）',
        value: 68
      }, {
        name: '上年度教育支出（元）',
        value: 48
      }, {
        name: '上年度医疗支出（元）',
        value: 40
      }, {
        name: '上年度总支出（元）',
        value: 32
      }];

      var data3 = [{
        name: '残疾人员',
        value: 30
      }, {
        name: '低保人员',
        value: 48
      }, {
        name: '五保人员',
        value: 53
      }, {
        name: '留守老人',
        value: 40
      }, {
        name: '服刑在教人员未成年子女',
        value: 32
      }];

      option = {
        title: [{
          text: '乡镇信息',
          left: 'center',
        }, {
          subtext: '家庭平均收入',
          left: '16.67%',
          top: '75%',
          textAlign: 'center'
        }, {
          subtext: '家庭平均支出',
          left: '50%',
          top: '75%',
          textAlign: 'center'
        }, {
          subtext: '贫困人口分布类型',
          left: '83.33%',
          top: '75%',
          textAlign: 'center'
        }],
        series: [{
          type: 'pie',
          radius: '25%',
          center: ['50%', '50%'],
          data: data,
          label: {
            position: 'outer',
            alignTo: 'none',
            bleedMargin: 5
          },
          left: 0,
          right: '66.6667%',
          top: 0,
          bottom: 0
        }, {
          type: 'pie',
          radius: '25%',
          center: ['50%', '50%'],
          data: data2,
          label: {
            position: 'outer',
            alignTo: 'labelLine',
            bleedMargin: 5
          },
          left: '33.3333%',
          right: '33.3333%',
          top: 0,
          bottom: 0
        }, {
          type: 'pie',
          radius: '25%',
          center: ['50%', '50%'],
          data: data3,
          label: {
            position: 'outer',
            alignTo: 'edge',
            margin: 20
          },
          left: '66.6667%',
          right: 0,
          top: 0,
          bottom: 0
        }]
      };
      myChart.setOption(option);
    }
  },
    mounted() {
      this.myEcharts()
      this.footEcharts()
    },

}
</script>

<style scoped lang="scss">

</style>

